<template>
	<div class="dateContainer">
		<img src="../assets/images/火 箭.png" alt="" class="weather" />
		<div class="textContainer">
			<em>华吉辰</em>
			<em>{{ YMD }}</em>
		</div>
		<div class="date">
			<em> {{ date }} </em>
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	export default {
		props: {
			msg: String,
		},
		data() {
			return {
				date: '',
				YMD: '',
			};
		},
		computed: {},
		watch: {},
		created() {
			this.getTimes();
		},
		mounted() {},
		methods: {
			getTimes() {
				setInterval(this.getTimesInterval, 1000);
			},
			getTimesInterval() {
				this.date = moment().format('HH:mm');
				this.YMD = moment().format('YYYY-M-D');
			},
		},
		beforeDestroy() {
			if (this.times) {
				clearInterval(this.getTimesInterval);
			}
		},
	};
</script>

<style scoped>
	.dateContainer {
		width: 3.5rem;
		height: 0.5rem;
		float: right;
		margin-right: 0.625rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to left, #a3bef1, #a3bef1) left top no-repeat,
			linear-gradient(to bottom, #a3bef1, #a3bef1) left top no-repeat,
			linear-gradient(to left, #a3bef1, #a3bef1) right top no-repeat,
			linear-gradient(to bottom, #a3bef1, #a3bef1) right top no-repeat,
			linear-gradient(to left, #a3bef1, #a3bef1) left bottom no-repeat,
			linear-gradient(to bottom, #a3bef1, #a3bef1) left bottom no-repeat,
			linear-gradient(to left, #a3bef1, #a3bef1) right bottom no-repeat,
			linear-gradient(to left, #a3bef1, #a3bef1) right bottom no-repeat;
		background-size: 0.0125rem 0.125rem, 0.125rem 0.0125rem, 0.0125rem 0.125rem, 0.125rem 0.0125rem;

		img {
			width: 0.375rem;
			height: 0.375rem;
			display: inline-block;
			margin-right: 0.1563rem;
		}

		.textContainer {
			width: auto;
			height: 0.375rem;
			line-height: 0.375rem;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			height: 100%;
			margin-right: 0.1563rem;

			em {
				font-size: 0.1875rem;
				display: inline-block;
				width: 100%;
				height: 0.2062rem;
				text-align: right;
			}
		}

		.date {
			height: 100%;
			em {
				font-size: 0.3rem;
				line-height: 0.625rem;
				color: #a3bef1;
				font-weight: 600;
			}
		}
	}
</style>
